<template>
    <view class="page">
        <view class="top_box">
            <back :title="'管理员登录'" :isBack="true" :isBg="false"></back>
            <view class="yzbicon_box">
                <image src="https://build.lwjcg.com/uploads/waste.png" mode="scaleToFill" />
            </view>
        </view>
        <view class="srk_box">
            <view class="lianxiren_box" style="margin-bottom: 50rpx;">
                <view class="text_box">管理员账号</view>
                <input type="text" :value="account" @blur="accountBlur" placeholder="请输入管理员账号">
            </view>
            <view class="lianxiren_box">
                <view class="text_box">管理员账号密码</view>
                <input type="password" :value="code" @blur="codeBlur" placeholder="请输入管理员密码">
            </view>
        </view>
        <view class="jizhu_box">
            <view class="tyan_box" @click="tyBtn">
                <image v-if="!defalut" src="https://rubbish.lwjcg.com/static/index/ySel.png" mode="scaleToFill" />
                <image v-else src="https://rubbish.lwjcg.com/static/index/ty.png" mode="scaleToFill" />
            </view>
            <view class="tyantext_box">记住账号密码</view>
        </view>

        <view class="lijidenglu" @click="$noMultipleClicks(submit)">立即登录</view>

    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            noClick: true,//防连点
            account: '',//账号admin
            code: '',//密码liu852529
            defalut: false,//默认不记住账号密码
        }
    },
    onShow() {
        this.defalut = false
        if (uni.getStorageSync('account') && uni.getStorageSync('password')) {
            this.defalut = true
            this.account = uni.getStorageSync('account')
            this.code = uni.getStorageSync('password')
        }
    },
    methods: {
        accountBlur(e) {
            this.account = e.detail.value
        },
        codeBlur(e) {
            this.code = e.detail.value
        },
        tyBtn() {
            this.defalut = !this.defalut
        },
        submit() {
            if (this.account == '') {
                uni.showToast({
                    title: '请输入账号',
                    icon: 'none'
                })
            } else if (this.code == '') {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none'
                })
            } else {
                let data = {
                    account: this.account,
                    password: this.code
                }
                if (this.defalut) {
                    uni.setStorageSync('account', this.account)
                    uni.setStorageSync('password', this.code)
                }
                this.$Request.post(this.$api.administrator.manageLogin, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: '登录成功',
                            icon: 'none'
                        })
                        setTimeout(() => {
                            uni.navigateTo({
                                url: '/userPage/administrator/center'
                            })
                        }, 600)
                    }
                })
            }

        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(245, 245, 245, 1);

    .top_box {
        width: 750rpx;
        height: 730rpx;
        opacity: 1;
        position: relative;
        background: linear-gradient(180deg, rgba(226, 244, 243, 1) 0%, rgba(226, 244, 243, 0) 100%);
        margin-bottom: 100rpx;

        .yzbicon_box {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 596rpx;
            height: 476rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }


    }

    .tijiao_text_box {
        width: 704rpx;
        height: 262rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding-top: 18rpx;
        margin-bottom: 134rpx;

        .dengdai_icon {
            width: 58rpx;
            height: 62rpx;
            margin: auto;
            margin-bottom: 20rpx;

            image {
                width: 100%;
                height: 100%;
            }

        }

        .sqz_text {
            text-align: center;
            width: 100%;
            height: 46rpx;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 46rpx;
            color: rgba(51, 51, 51, 1);
            margin-bottom: 20rpx;
        }

        .sm_text_box {
            width: 100%;
            height: 68rpx;
            font-size: 26rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 68rpx;
            color: rgba(128, 128, 128, 1);
            text-align: center;

        }
    }

    .fanhui_box {
        width: 652rpx;
        height: 100rpx;
        border-radius: 14rpx;
        text-align: center;
        line-height: 100rpx;
        border: 2rpx solid rgba(26, 194, 121, 1);
        margin: auto;
        font-size: 36rpx;
        font-weight: 400;
        color: rgba(26, 194, 121, 1);
    }

    .srk_box {
        width: 704rpx;
        height: 442rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        box-sizing: border-box;
        padding-top: 44rpx;
        margin-bottom: 20rpx;





        .lianxiren_box {
            width: 628rpx;
            height: 150rpx;
            margin: auto;
            border-bottom: 2rpx solid rgba(237, 240, 240, 1);

            .text_box {
                height: 44rpx;
                opacity: 1;
                /** 文本1 */
                font-size: 32rpx;
                font-weight: 700;
                letter-spacing: 0rpx;
                line-height: 43.9rpx;
                color: rgba(30, 33, 33, 1);

            }

            input {
                width: 100%;
                height: 100%;
                text-align: left;
                font-size: 32rpx;
                font-weight: 500;
                line-height: 46rpx;
                color: rgba(51, 51, 51, 1);
            }
        }


    }

    .jizhu_box {
        width: 100%;
        height: 40rpx;
        box-sizing: border-box;
        padding: 0 48rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-bottom: 50rpx;

        .tyan_box {
            width: 28rpx;
            height: 28rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .tyantext_box {
            height: 34rpx;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 34rpx;
            color: rgba(0, 0, 0, 1);
            margin-left: 12rpx;
        }
    }

    .lijidenglu {
        width: 652rpx;
        height: 100rpx;
        opacity: 1;
        border-radius: 20rpx;
        background: rgba(26, 194, 121, 1);
        margin: auto;
        text-align: center;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);

    }


}
</style>